<template>
    <el-card>
        <div slot="header">
            <span>分类管理</span>
        </div>
        <el-tree :load="loadNode" node-key="cate_id" ref="tree" lazy :props="defaultProps">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <el-button v-permission="'category:edit'" type="text" @click.stop="openEdittDialog(node, data)" :disabled="data.cate_id === 0">
                        编辑
                    </el-button>
                    <el-button v-permission="'category:create'" type="text" @click.stop="openInsertDialog(node, data)">
                        添加
                    </el-button>
                    <el-button v-permission="'category:remove'" type="text" @click.stop="handleRemove(node, data)" :disabled="data.cate_id === 0">
                        删除
                    </el-button>
                </span>
            </span></el-tree>
        <el-dialog title="添加分类" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
            <el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
                <el-form-item label="分类名称" prop="cate_name">
                    <el-input type="text" v-model="insert_form.cate_name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="insert_dialog_visible = false">取 消</el-button>
                <el-button type="primary" @click="handleInsert">添 加</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑分类" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
            <el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
                <el-form-item label="分类名称" prop="cate_name">
                    <el-input type="text" v-model="edit_form.cate_name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit_dialog_visible = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">添 加</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
<script>
import { Category } from '@/api';

export default {
    name: 'list',
    data() {
        return {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'cate_name'
            },
            insert_dialog_visible: false,
            edit_dialog_visible: false,
            current_node: '',
            insert_form: {
                cate_name: '',
                parent_id: '',
            },
            edit_form: {
                cate_name: '',
                parent_id: '',
            },
            rules:
                { cate_name: [{ required: true, message: '请输入标签名', trigger: 'blur', }] },
        };
    },
    created() {
        document.title="分类管理";
    },
    methods: {
        // 加载子集分类--懒加载
        async loadNode(node,resolve) {
            console.log(node,resolve);
            // 根节点
            let root_data=[{
                    cate_id: 0,
                    cate_name: "全部分类",
                }];
            if(node.level===0){
                return resolve(root_data);
            }
            // 子集节点
            let {cate_id}=node.data;
            let { status, data } = await Category.sub({ cate_id});
            if (status) {
                resolve(data);
            }
        },
        openInsertDialog(node, data) {
            //缓存当前操作的node_data
            this.current_node = node;
            //确定父级id
            this.insert_form.parent_id = data.cate_id;
            //打开dialog
            this.insert_dialog_visible = true;
        },
        // 添加分类
        handleInsert() {
            this.$refs.insert_form.validate(async (valid) => {
                if (valid) {
                    let { status, msg, data } = await Category.add({ ...this.insert_form });
                    if (status) {
                        let newChild = { ...this.insert_form, ...data };
                        this.$refs.tree.append(newChild,this.current_node);
                        this.insert_dialog_visible = false;
                        this.$message.success(msg);
                    } else {
                        this.$message.error(msg);
                    }
                }
            });
        },
        openEdittDialog(node, data) {
            this.current_node = node;
            this.edit_form = { ...data };
            this.edit_dialog_visible = true;
        },
        handleEdit() {
            this.$refs.edit_form.validate(async (valid) => {
                if (valid) {
                    let { status, msg } = await Category.edit({ ...this.edit_form });
                    if (status) {
                        this.current_node.data = { ...this.edit_form };
                        this.edit_dialog_visible = false;
                        this.$message.success(msg);
                    } else {
                        this.$message.error(msg);
                    }
                }
            });
        },
        handleRemove(node, data) {
            let { cate_id } = data;
            this.$confirm('此操作将永久删除该分类, 是否继续?', '确认删除', { type: 'warning' })
                .then(async () => {
                    //删除
                    let { status, msg } = await Category.remove({ cate_id });
                    if (status) {
                        //操作DOM
                        this.$refs.tree.remove(data);
                        //信息提示
                        this.$message.success(msg);
                    } else {
                        //信息提示
                        this.$message.error(msg);
                    }
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
        },
        handleCloseDialog(formName) {
            this.$refs[formName].resetFields();
        },
        handleNodeClick(data) {
            console.log(data);
        }
    }
};
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>